<div class="panel panel-default panel-intro">
    <!-- 功能板块操作提示栏 -->
    <div class="school-guide-panel"
        style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
        <div class="panel-header"
            style="padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: space-between; align-items: center;">
            <h4 style="margin: 0; font-weight: 600;"><i class="fa fa-map-marker"></i> 学校项目管理模块操作指引</h4>
            <button class="btn btn-sm" id="toggleGuide"
                style="background: rgba(255,255,255,0.2); border: none; color: white; border-radius: 4px; padding: 5px 10px;">
                <i class="fa fa-chevron-down"></i> 展开
            </button>
        </div>
        <div class="guide-content" id="guideContent" style="padding: 20px; display: none;">
            <!-- 当前步骤信息 -->
            <div class="current-step-info"
                style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 6px; margin-bottom: 20px;">
                <div style="display: flex; align-items: center; margin-bottom: 10px;">
                    <span class="step-badge"
                        style="background: #28a745; color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; margin-right: 10px;">当前步骤</span>
                    <h5 style="margin: 0; font-weight: 600;">第1步：基础信息录入</h5>
                </div>
                <p style="margin: 0; opacity: 0.9;">请在此页面完成学校教学点录入，包括教学点名称、地址、容量等信息。</p>
            </div>

            <!-- 进度条 -->
            <div class="progress-container" style="margin-bottom: 20px;">
                <div class="progress"
                    style="height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden;">
                    <div class="progress-bar"
                        style="width: 16.66%; background: #28a745; height: 100%; transition: width 0.3s ease;"></div>
                </div>
                <div
                    style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; opacity: 0.8;">
                    <span>步骤 2/12</span>
                    <span>16.66% 完成</span>
                </div>
            </div>

            <!-- 操作步骤列表 -->
            <div class="steps-list"
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px;">
                <div class="step-item completed"
                    style="background: rgba(40, 167, 69, 0.2); padding: 15px; border-radius: 6px; border-left: 4px solid #28a745;">
                    <div style="display: flex; align-items: center; margin-bottom: 8px;">
                        <span class="step-number"
                            style="background: #28a745; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; margin-right: 10px;">✓</span>
                        <strong>学校基础信息录入</strong>
                        <span class="completed-badge"
                            style="background: #28a745; color: white; padding: 2px 8px; border-radius: 10px; font-size: 10px; margin-left: 10px;">已完成</span>
                    </div>
                    <p style="margin: 0 0 10px 34px; font-size: 13px; opacity: 0.9;">在学校管理模块里新建和完善学校的基础信息</p>
                    <button class="btn btn-sm btn-success"
                        onclick="window.top.location.href='/school/school?ref=addtabs'"
                        style="margin-left: 34px; padding: 4px 12px; font-size: 12px;">已完成</button>
                </div>

                <div class="step-item active"
                    style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 6px; border-left: 4px solid #28a745;">
                    <div style="display: flex; align-items: center; margin-bottom: 8px;">
                        <span class="step-number"
                            style="background: #28a745; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; margin-right: 10px;">1.2</span>
                        <strong>教学点信息录入</strong>
                        <span class="current-badge"
                            style="background: #ffc107; color: #000; padding: 2px 8px; border-radius: 10px; font-size: 10px; margin-left: 10px;">当前</span>
                    </div>
                    <p style="margin: 0 0 10px 34px; font-size: 13px; opacity: 0.9;">在教学点管理模块里完成学校教学点录入</p>
                    <button class="btn btn-sm btn-success"
                        onclick="window.top.location.href='/classes/classes?ref=addtabs'"
                        style="margin-left: 34px; padding: 4px 12px; font-size: 12px;">如果已完善，点击到下一步</button>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* 隐藏ID列 */
        #table th[data-field="id"],
        #table td[data-field="id"] {
            display: none !important;
        }

        /* 如果使用Bootstrap Table，也可以用这种方式 */
        .bootstrap-table .fixed-table-container .fixed-table-body table tbody tr td:nth-child(2),
        .bootstrap-table .fixed-table-container .fixed-table-header table thead tr th:nth-child(2) {
            display: none !important;
        }
    </style>

    {:build_heading()}
    <div class="panel-body">
        <div id="myTabContent" class="tab-content pidhidden">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <!-- 添加选项卡 -->


                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i
                                class="fa fa-refresh"></i> </a>
                        <a href="javascript:;"
                            class="btn btn-success btn-add {:$auth->check('ocation/ocation/add')?'':'hide'}"
                            title="{:__('Add')}"><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;"
                            class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('ocation/ocation/edit')?'':'hide'}"
                            title="{:__('Edit')}"><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;"
                            class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('ocation/ocation/del')?'':'hide'}"
                            title="{:__('Delete')}"><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        <a href="javascript:;"
                            class="btn btn-success btn-recyclebin-popup" data-url="ocation/ocation/recyclebin" title="{:__('Recycle bin')}">
                                <i class="fa fa-recycle"></i> {:__('Recycle bin')}
                            </a>
                        <a href="javascript:;"
                            class="btn btn-warning btn-export btn-disabled disabled {:$auth->check('coursetable/autoplan/export')?'':'hide'}"
                            title="{:__('Export')}"><i class="fa fa-download"></i> 导出</a>


                        <div class="dropdown btn-group {:$auth->check('ocation/ocation/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled"
                                data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                        data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a>
                                </li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;"
                                        data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to
                                        hidden')}</a></li>
                            </ul>
                        </div>

                        <div class="btn-group" style="margin-bottom: 10px;margin-top: 10px;">
                            <button type="button" class="btn btn-default active" data-filter="all">全部</button>
                            <button type="button" class="btn btn-default" data-filter="校内">校内</button>
                            <button type="button" class="btn btn-default" data-filter="校外">校外</button>

                            <!-- 添加城市、学校选项卡 -->
                            <div class="row cityschool">
                                <div class="col-md-3">
                                    <select id="c-cityarea_id" name=city_id" class="form-control select"
                                        data-live-search="true" title="选择城市">
                                        <option value="">全部城市</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <select id="c-school_id" name="school_id" class="form-control select"
                                        data-live-search="true" title="选择学校">
                                        <option value="">全部学校</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-info btn-filter" id="btn-filter">
                                        <i class="fa fa-search"></i> 筛选
                                    </button>
                                </div>
                            </div>
                        </div>



                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover"
                        data-operate-edit="{:$auth->check('ocation/ocation/edit')}"
                        data-operate-del="{:$auth->check('ocation/ocation/del')}" width="100%">
                    </table>

                    <style>
                        /* 隐藏ID列和父ID列 */
                        #table th[data-field="id"],
                        #table td[data-field="id"],
                        #table th[data-field="parent"],
                        #table td[data-field="parent"] {
                            display: none !important;
                        }

                        /* Bootstrap Table方式隐藏第二列(ID列)和第三列(父ID列) */
                        .bootstrap-table .fixed-table-container .fixed-table-body table tbody tr td:nth-child(2),
                        .bootstrap-table .fixed-table-container .fixed-table-header table thead tr th:nth-child(2),
                        .bootstrap-table .fixed-table-container .fixed-table-body table tbody tr td:nth-child(3),
                        .bootstrap-table .fixed-table-container .fixed-table-header table thead tr th:nth-child(3) {
                            display: none !important;
                        }

                        /* 树型结构样式 */
                        .tree-node {
                            white-space: nowrap;
                        }

                        .tree-indent {
                            display: inline-block;
                            width: 30px;
                            height: 1px;
                        }

                        .tree-indent-large {
                            display: inline-block;
                            width: 80px;
                            height: 1px;
                        }

                        .tree-connector {
                            color: #007bff;
                            margin-right: 5px;
                            font-family: monospace;
                            font-weight: bold;
                        }

                        .tree-icon {
                            margin-right: 5px;
                        }

                        /* 不同层级的行背景色 */
                        .level-0 {
                            background-color: #f8f9fa !important;
                            font-weight: bold;
                        }

                        .level-1 {
                            background-color: #fff !important;
                        }

                        .level-2 {
                            background-color: #f8f9fa !important;
                        }

                        .level-3 {
                            background-color: #fff !important;
                        }

                        /* 悬停效果 */
                        #table tbody tr:hover {
                            background-color: #e3f2fd !important;
                        }

                        /* 教学点名称列的特殊样式 */
                        #table td[data-field="name"] {
                            padding-left: 5px !important;
                            vertical-align: middle !important;
                        }

                        /* 教室行的特殊样式 */
                        .classroom-row {
                            background-color: #fff3cd !important;
                        }

                        /* 根节点行的特殊样式 */
                        .root-row {
                            border-top: 2px solid #007bff !important;
                        }
                    </style>
                </div>
            </div>

        </div>
    </div>
</div>